<template>
	<uv-navbar auto-back fixed bg-color="none" left-icon-color="#fff" />
	<report_header :header-bg-height="534" :centent-margin-top="-88" :bgsrc="`${imgPath}mine/bj.svg`" class="containerbox">
		<scroll-view scroll-y class="containerbox">
			<view class="text-white px-30 mb-30" v-if="reprt.user">
				<uv-navbar bg-color="none" :placeholder="false" :fixed="false" left-icon-color="transparent" />
			    <view class="text-60 w-ratio-65 font-weight-700">英语水平专业</view>
				<view class="text-40 w-ratio-65 font-weight-700 mb-15">测试报告</view>
				
			    <view class="text-cont text-26 py-5 px-25 inline-block round-50">
			      {{ reprt.user && reprt.user.name ? reprt.user.name : '' }} <text class="sex">{{ reprt.user && reprt.user.gender ? reprt.user?.gender : '' }}</text> {{ reprt.createdAt }}
			    </view>
			</view>
			
			<view class="px-30 h-full round-lg flex-col " v-if="reprt.user && reprt.rule">
				<view class="mb-30 bgc-white round-lg text-center">
					<view class="name1 text-32 pt-30">{{ reprt.user && reprt.user.name ? reprt.user.name : '' }}，你好！你的词汇量为</view>
					<view class="name2 color1 text-50 font-weight-600 mt-15 pb-30">
						<text class="num mr-20">{{ reprt.words }}</text><text>{{ `${reprt.rule && reprt.rule.name ? reprt.rule.name : ''}${reprt.rule && reprt.rule.level ? reprt.rule.level : ''}` }}水平</text>
					</view>
				</view>
				
				<!-- 漏斗图 -->
				<report_funnel :list="reprt.ruleList" />
				
				<view class="text-center round-20 px-30 my-30 bgc-white">
					  <view class="flex-center mb-15 pt-30">
							<uv-image :src="`${imgPath}mine/dd.svg`" width="40rpx" height="20rpx" />
							<text class="text-32 ml-25 mr-25">测评结果柱状对比图</text>
							<uv-image :src="`${imgPath}mine/dd.svg`" width="40rpx" height="20rpx" />
					  </view>
					 <view class="mt-40 pb-30">
						 <view class="flex-between flex-center mb-20">
							<!-- <text class="text-24">{{reprt.rule?.name+reprt.rule?.level}}水平</text> -->
							<text class="text-24">高中高级水平</text>
							<text class="text-24">{{reprt.highSchoolRule?.words}}</text>
						 </view>
						<uv-line-progress :percentage="reprt.highSchoolRule?.words/8000*100" height="26" activeColor="#0B9AFF" :showText="false"></uv-line-progress>
						<view class="flex-between flex-center mb-20 mt-20">
							<text class="text-24">现实掌握词汇量</text>
							<text class="text-24">{{reprt.words}}</text>
						</view>
						<uv-line-progress :percentage="reprt.words/8000*100" height="26" activeColor="#F69B2C" :showText="false"></uv-line-progress>
					 </view>
				</view>
				
				<report_intro lable="语言能力" :centent="reprt.rule.languageAbility" />
				<report_intro lable="测评分析" :centent="reprt.rule.evaluationAnalysis" class="my-30" />
				<report_intro lable="学习建议" :centent="reprt.rule.learningAdvice" class="mb-30" />
				
				<view class="h-1 opacity-0">~</view>
			</view> 
		</scroll-view>
	</report_header>
</template>

<script setup>
	
	import { onMounted, reactive, ref } from 'vue'
	import { imgPath } from '@/common/config'
	import { examDetail } from '@/common/apis/study'
	import { onLoad } from "@dcloudio/uni-app"
	
	import report_header from '@/pages/components/header'
	import report_intro from './components/intro.vue'
	import report_funnel from './components/funnel.vue'
	const chartData = ref({})
	const chartData1 = ref({})
	const reprt = ref({})  
	
    const opts = reactive({
        color: ["#0B9AFF", "#F69B2C"],
        legend: { show: false },
        yAxis: {
			data: [{
				min: 0,
				max: 8000,
				axisLine: false
			}]
        },
		xAxis: {
			calibration: true,
			marginTop: 5
		},
        extra: {
			mount: {
				type: "bar",
				widthRatio: 0.2
			}
        }
    })
	onLoad(async (param)=>{
		let result = await examDetail(param)
		reprt.value = result
		// let res={
		// 	series:[
		// 		{
		// 			data:[
		// 				{
		// 					name:result.rule.name+result.rule.level+'水平',
		// 					value:result.highSchoolRule.words,
		// 				},
		// 				{
		// 					name:"现实掌握词汇量",
		// 					value:result.words,
		// 				},
		// 			]
		// 		}
		// 	]
		// }
		// console.log(res)
		// chartData.value=res
	})
</script>

<style scoped lang="scss">
	.charts-tip{color: #3A3F5E}
	.charts-box {height: 456rpx}
	.color1{color: #F69B2C}
	.color2{color: #626780}
	.text-cont{background: rgba(255, 255, 255, .2)}
	.h-386{height: 386rpx}
	.opacity-0{opacity: 0;color: #fff}
</style>